<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var leftClock;
			var rigthClock;
			function startColock(){
				leftClock=window.setInterval("updateLeftClock()",500);
				rigthClock=setTimeout("updateRigthClock()",500);
			}
			function updateLeftClock(){
				var now  = new Date();
				var h = now.getHours();
				var m = now.getMinutes();
				var s = now.getSeconds();
				m = checkTime(m);
				s = checkTime(s);
				document.getElementById("left").innerHTML=h+":"+m+":"+s;
			}
			function updateRigthClock(){
				var now  = new Date();
				var h = now.getHours();
				var m = now.getMinutes();
				var s = now.getSeconds();
				m = checkTime(m);
				s = checkTime(s);
				document.getElementById("right").innerHTML=h+":"+m+":"+s;
				rightClock = setTimeout("updateRigthClock()",500);
			}
			function checkTime(i){
				if(i<10){
					i="0"+i;
				}
				return i;
			}
			
			function stopColock(){
				window.clearInterval(leftClock);
				window.clearTimeout(rightClock);
			
			}
		</script>
	</head>
	<body>
		<div style="text-align: center;">
			<h3> JavaScript时间空间</h3>
			<br>
			现在时间是：<span style="color: red; font-weight: bold;" id="left"></span> |
			Now时间是：<span style="color: blue; font-weight: bold;" id="right"></span><br>

			<input type="button" value="启动" onclick="startColock()">
			<input type="button" value="停止" onclick="stopColock()">
			
		</div>
	</body>
</html>
